<!--
  oauth2配置弹层、 服务商 or 普通商户。 

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/09 15:06
-->
<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="oauth2配置"
    :closable="true"
    :body-style="{ paddingBottom: '80px' }"
    :drawer-style="{ backgroundColor: '#f0f2f5' }"
    width="85%"
    @close="vdata.visible = false"
  >
    <div>
      <template v-if="props.configMode == 'mgrIsv'">
        选择配置的条目： 
        <a-select v-model:value="vdata.diyListSelectedInfoId" style="width: 400px" placeholder="选择配置条目" @change="changeTabFunc">
          <a-select-option value="">默认</a-select-option>
          <a-select-option v-for="item in vdata.diyList" :key="item.infoId" :value="item.infoId">{{ item.remark }} [{{ item.infoId }}]</a-select-option>
        </a-select>

        <a-button v-if="vdata.diyAddMode == 'init'" type="primary" style="margin-left:20px" @click="vdata.diyAddMode = 'adding'"><template #icon><PlusOutlined /></template>创建</a-button>
        <template v-if="vdata.diyAddMode == 'adding'">
          <span style="margin-left: 20px">输入名称：</span> <a-input v-model:value="vdata.addDiyListName" style="width:200px" />
          <span style="margin-left: 20px"><a-checkbox v-model:checked="vdata.addDiyListIsCopyCurrentFlag" />
            复制当前参数
            <a-popover placement="top">
              <template #title><span>复制当前参数</span></template>
              <template #content>
                <p>勾选： 新创建的oauth2参数将来源自当前选择条目的记录值。且创建副本，互不干扰。 </p>
                <p>不勾选： 创建全新的记录， 所有的参数需要重新填入。 </p>
              </template>
              <question-circle-outlined />
            </a-popover>
          </span> 

          <a-button type="danger" style="margin-left:20px" @click="addDiyFunc"><template #icon><CheckOutlined /></template>确认</a-button>
          <a-button type="primary" style="margin-left:20px" @click="vdata.addDiyListName = ''; vdata.addDiyListIsCopyCurrentFlag = true; vdata.diyAddMode = 'init'"><template #icon><CloseOutlined /></template>取消</a-button>
        </template>
        
        <a-divider />
      </template>

      <a-tabs v-model:activeKey="vdata.currentIfCode" tabPosition="top" type="card" @change="changeTabFunc">
        <a-tab-pane key="wxpay" tab="微信" />
        <a-tab-pane key="alipay" tab="支付宝" />
      </a-tabs>

      <a-card>
        <div style="padding:30px">
          <!-- 引入具体的接口组件  -->
          <component :is="vdata.currentComponent" ref="oauth2ConfigPageRef" :configMode="props.configMode" />


          <div style="display: flex;justify-content: space-around;flex-direction: row;">
            <a-button type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />  保存</a-button>
          </div>
        </div>
      </a-card>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup >
import { ref, reactive, defineExpose, nextTick, getCurrentInstance } from 'vue'
import { $getOauth2SavedConfigs, $saveOauth2ConfigParams, $getOauth2DiyList, $addOauth2DiyList } from '@/api/manage'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties


const oauth2ConfigPageRef = ref()


// 定义父组件的传值
const props = defineProps({
  configMode: { type: String, default: '' }, // 支付接口
})

const vdata : any = reactive({
  

      visible: false, // 一级抽屉开关
      infoId: null, // infoId (默认的infoId)

      saveObject: null, // PayInterfaceConfig 信息
      btnLoading: false, 
      currentIfCode: 'wxpay', // 默认 微信
      currentComponent : null,
      isIsvSubmchType: false, 

      diyListSelectedInfoId: '', // 选择的配置条目 也是调起接口的infoId, 若是null, 那么请取 上面的infoId 
      diyList: [], // 配置条目diyList 
      diyAddMode: 'init', // init - 初始态仅显示新建按钮，   adding - 创建中， 显示名称和确认按钮。 
      addDiyListName: '', // 新增的名称
      addDiyListIsCopyCurrentFlag: true, // 新增条目参数是否来自当前

})


// 切换渠道选择
function changeTabFunc(){
  
  vdata.currentComponent = null

  // 查询出当前的配置
  $getOauth2SavedConfigs(getDiyInfoIdOrDefInfoId(), vdata.currentIfCode, props.configMode ).then(res => {

    vdata.saveObject = res

    let importSuccessFunc = (module) => {

      vdata.currentComponent = module.default

      // 设置当前存储的配置项
      let currentConfig = JSON.parse(vdata.saveObject.ifParams || '{}' )
      nextTick(() => oauth2ConfigPageRef.value.pageRender(currentConfig))
    }

    if(vdata.isIsvSubmchType){

      // 根据支付接口名称  动态引入组件 
      import(`./${vdata.currentIfCode}/Oauth2ConfigPageByIsvSubmch.vue`).then( (module) => importSuccessFunc(module) )

    }else{

      // 根据支付接口名称  动态引入组件 
      import(`./${vdata.currentIfCode}/Oauth2ConfigPage.vue`).then( (module) => importSuccessFunc(module) )
    }

  })
  
}

// 提交
function onSubmit(){

  oauth2ConfigPageRef.value.getConfigParams().then(ifPrams => { //2. 验证渲染组件表单

    // 赋值
    vdata.saveObject.ifParams = JSON.stringify(ifPrams || {} )

    // 配置模式
    vdata.saveObject.infoId = getDiyInfoIdOrDefInfoId()
    vdata.saveObject.ifCode = vdata.currentIfCode
    vdata.saveObject.configMode = props.configMode

    // 请求接口
    $saveOauth2ConfigParams(vdata.saveObject).then(res => {
      $infoBox.message.success('保存成功')
    })
  })
}


// 弹层打开事件  mchType 默认
function show (infoId, isIsvSubmchType = false) {

  vdata.infoId = infoId
  vdata.visible = true

  vdata.currentIfCode = 'wxpay' // 默认wxpay
  vdata.isIsvSubmchType = isIsvSubmchType


  // 清空数据 
  vdata.diyListSelectedInfoId = ''
  vdata.diyList = []
  vdata.diyAddMode = 'init'
  vdata.addDiyListName = ''
  vdata.addDiyListIsCopyCurrentFlag = true

  changeTabFunc()

  refDiyList() // 刷新diy列表

}

// 刷新 diy列表 
function refDiyList(){

   // 其他平台， 不需要查询（接口也会报错）
  if(props.configMode == 'mgrIsv'){
    // 查询出所有的diy列表
    $getOauth2DiyList(vdata.infoId, props.configMode).then((res) => {
      vdata.diyList = res
    })
  }

}


// 添加条目
function addDiyFunc(){

  if(!vdata.addDiyListName){
    return $infoBox.message.error('请输入名称')
  }

  $infoBox.confirmPrimaryPromise('确认新增该服务商的配置条目?', '新建后不支持修改/删除，请谨慎操作').then(() => {

    // 参数是否来自某个账号 
    let copySourceInfoId = vdata.addDiyListIsCopyCurrentFlag ? getDiyInfoIdOrDefInfoId() : null

    $addOauth2DiyList(vdata.infoId, props.configMode, vdata.addDiyListName, copySourceInfoId).then((params) => {

      // 清空名称 & 恢复 
      vdata.addDiyListName = ''
      vdata.addDiyListIsCopyCurrentFlag = true
      vdata.diyAddMode = 'init'

      refDiyList() // 刷新diy列表
      
    })
    
  })
}

// 取值配置的infoId, 选择的id or 默认 
function getDiyInfoIdOrDefInfoId(){
  return vdata.diyListSelectedInfoId || vdata.infoId
}


defineExpose({ show })
</script>
